<script setup lang='ts'>
//引入nextTick
import { ref, nextTick, watch } from "vue"
//引入控制刷新的仓库
import { sliderFoldStore } from "@/stores/modules/sliderFold"
let store = sliderFoldStore();
let flag = ref(true)
//监听store中toRefsh的变化
watch(
    () => store.toRefsh,
    () => {
        flag.value = false;
        nextTick(() => {
            flag.value = true
        })
    }
)
</script>

<template>
    <div class="container">
        <router-view v-slot="{ Component }">
            <transition name="fade">
                <component :is="Component" v-if="flag" />
            </transition>
        </router-view>
    </div>
</template>



<style lang="less" scoped>
.fade-enter-from {
    opacity: 0;
    transform: scale(0);

}

.fade-enter-active {
    transition: all 1.5s;
}

.fade-enter-to {
    opacity: 1;
    transform: scale(1);

}
</style>